import React from "react";
import { Form, Input, Button, Checkbox } from 'antd';
import {Redirect} from "react-router-dom";
import "antd/dist/antd.css";
import "../css/Login.css";
import axios from "axios";

class Login extends React.Component{
  constructor(props){
    super(props);

  }

  render(){
    return(
      <div className="login_container">
        <div className="login_wrapper">
        <Form 
        name="basic"
        onFinish={this.onFinish}>
            <Form.Item
            label="Username"
            name="username"
            rules={[
              // {     
              //   required: true,
              //   message: '请输入用户名！',
              // },
              {
                validator:(_, value) => {
                  if(value){
                    return value.length>=3 ? Promise.resolve() : Promise.reject('用户名必须大于3个字符');
                  }else{
                    return Promise.reject('用户名不能为空！')
                  }
                }
              }
            ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
            label="Password"
            name="password"
            rules={[
              {
                validator:function(_,value){
                  return value ? Promise.resolve():Promise.reject('密码不能为空！')
                }
              }
            ]}
            >
             <Input.Password/>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                Login
              </Button>
            </Form.Item>
         </Form> 
        </div>
      </div>
    )
  }

  onFinish=(values)=>{
    console.log(values);
    axios.post("http://ceshi5.dishait.cn/admin/login",values).then((res)=>{
      console.log(res);
      var token = res.data.data.token;
      localStorage.setItem("token",token);
      this.props.history.replace("/");
    }).catch((error)=>{
      console.log(error)
    })
  }
}

export default Login;